<!-- 会员中心 -->
<template>
	<view class="vip">
		<view class="bg">
			<view class="top">
				<view class="head">
					<!-- #ifdef APP-PLUS -->
					<u-icon @click="back" name="arrow-left" size="40rpx" color="#fff"></u-icon>
					<!-- #endif -->
					<view class="title">会员权益</view>
					<view class="txt" @click="rightCb">时长记录</view>
				</view>
				<view class="photo">
					<view class="box">
						<image v-if="userData.headPortrait" :src="userData.headPortrait"></image>
						<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/avatar@2x.png"></image>
					</view>
					<text>{{userData.nickName}}</text>
				</view>

				<view class="card" v-if="userData.vipEndDay>0">
					<view class="left">
						<view class="text1">已知尊享会员</view>
						<view class="text2">NO.{{userData.memberId}}</view>
					</view>
					<view class="right">
						<view class="text1">{{userData.endTime}}到期</view>
						<view class="text2" @click="goBuyVip">立即续费</view>
					</view>
				</view>

				<view class="noCard" v-else>
					<view class="box">
						<view class="title">
							<view class="left">
								<u-icon name="arrow-right" class="arrow" size="24rpx"></u-icon>
								<u-icon name="arrow-right" class="arrow" size="28rpx"></u-icon>
								<u-icon name="arrow-right" class="arrow"></u-icon>
							</view>
							<view class="notice">您还不是会员</view>
							<view class="right">
								<u-icon name="arrow-left" class="arrow"></u-icon>
								<u-icon name="arrow-left" class="arrow" size="28rpx"></u-icon>
								<u-icon name="arrow-left" class="arrow" size="24rpx"></u-icon>
							</view>
						</view>
						<view class="text" @click="goBuyVip">成为会员</view>
					</view>
				</view>

			</view>
			<!-- 专属权益 -->
			<view class="bot">
				<view class="title">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img1.png"></image>
					<view>会员专属权益</view>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img2.png"></image>
				</view>
				<view class="main">
					<view class="item" v-for="(item,index) in items" @click="goDetail(item.id)" :key="index">
						<image class="pic" :src="item.icon"></image>
						<view class="title">{{item.title}}</view>
						<view class="text">{{item.subtitle}}</view>
					</view>
				</view>
				<view class="xy" @click.stop="goAgree">
					《会员服务协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserData,
		vipEquity
	} from '@/apis/apis.js'
	export default {
		data() {
			return {
				userData: {},
				items: [{
						url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img4.png',
						title: '课程折扣',
						text: '课程享有会员特价'
					},
					{
						url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img5.png',
						title: '10%佣金',
						text: '我的下级购买'
					},
					{
						url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img6.png',
						title: '免费课程',
						text: '部分课程会员免费'
					}
				],
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				getUserData().then(res => {
					// console.log('基础数据',res)
					res.data.endTime = this.$timesFormat(res.data.vipEndTime, 'zh').split(' ')[0]
					this.userData = res.data
				})
				vipEquity().then(res => {
					console.log('会员权益', res)
					this.items = res.data
				})
			},
			goBuyVip() {
				uni.navigateTo({
					url: './buyVip'
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: `./vipDetail?id=${id}`
				})
			},
			goAgree() {
				uni.navigateTo({
					url: '/pages/argeement/userArgeement?type=' + 2
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			rightCb() {
				uni.navigateTo({
					url: './time'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip {
		background-color: #292c40;

		.bg {
			width: 100vw;
			height: 100vh;
			background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg.png') no-repeat 0 0;
			background-size: 100% auto;
			display: flex;
			flex-direction: column;

			.top {
				padding: 0 30rpx;

				.head {
					position: relative;
					padding-top: calc(var(--status-bar-height) + 30rpx);
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;

					.title {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
					}

					.txt {
						font-size: 28rpx;
						font-weight: normal;
					}
				}

				.photo {
					margin-left: 18rpx;
					margin-top: 50rpx;
					display: flex;
					align-items: center;

					.box {
						width: 100rpx;
						margin-right: 34rpx;
						height: 100rpx;
						border-radius: 50%;
						border: 6rpx solid #fff;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						color: #fff;
						font-size: 32rpx;
					}
				}

				.noCard {
					background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg2.png') no-repeat;
					background-size: cover;
					display: flex;
					justify-content: center;
					padding: 68rpx 0 36rpx 0;

					.box {
						width: 372rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.right {
								display: flex;
								align-items: center;

								.arrow {
									width: 16rpx;
								}
							}
							.left {
								display: flex;
								align-items: center;
														
								.arrow {
									width: 16rpx;
								}	
							}

							.notice {
								color: #2F2B29;
								font-weight: bold;
								font-size: 38rpx;
								text-shadow: 1px 2px 4px rgba(182, 142, 86, 0.5000);
							}
						}

						.text {
							height: 76rpx;
							background: linear-gradient(-90deg, #242325, #3F3735);
							// box-shadow: 0 0rpx 20rpx rgb(183,157,127);
							border: 10rpx solid rgb(183, 157, 127);
							// box-sizing: border-box;
							border-radius: 34px;
							line-height: 56rpx;
							text-align: center;
							// line-height: 66rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFDBB7;
						}
					}
				}

				.card,
				.noCard {
					margin-top: 48rpx;
					width: 100%;
					height: 258rpx;
					box-sizing: border-box;
				}

				.card {
					padding: 116rpx 32rpx 44rpx 34rpx;
					background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img3.png') no-repeat;
					background-size: cover;
					display: flex;
					justify-content: space-between;

					.left {
						.text1 {
							font-size: 44rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #2F2B29;

						}

						.text2 {
							margin-top: 18rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #AB7223;
						}
					}

					.right {
						.text1 {
							font-size: 24rpx;
							color: #252426;
							text-align: center;
						}

						.text2 {
							margin-top: 16rpx;
							width: 200rpx;
							height: 70rpx;
							background-color: black;
							text-align: center;
							line-height: 70rpx;
							border-radius: 36rpx;
							color: #FFDBB7;
							font-size: 28rpx;
						}
					}
				}
			}


			.bot {
				flex: 1;
				width: 100%;
				background-color: #fff;
				// height: calc(100vh - 574rpx);
				// position: fixed;
				// left: 0;
				border-radius: 30rpx 30rpx 0 0;
				// box-sizing: border-box;
				padding: 56rpx 28rpx 0;
				// overflow: hidden;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						color: #91582F;
						font-size: 36rpx;
						font-weight: 500;
					}

					image {
						width: 198rpx;
						height: 2rpx;
					}
				}

				.xy {
					position: absolute;
					bottom: 44rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 26rpx;
					color: #808080;
				}

				.main {
					margin-top: 45rpx;
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 30%;
						margin: 0 20rpx 20rpx 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						overflow: hidden;

						.pic {
							width: 102rpx;
							height: 102rpx;
						}

						.title {
							width: 210rpx;
							font-size: 30rpx;
							color: #3D250F;
							margin: 20rpx 0;
							font-weight: 500;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							display: inline-block;
						}

						.text {
							width: 210rpx;
							color: #9B9D9E;
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>
